<template>
  <el-card>
    <div slot="header">
      <span class="el-card-title">极坐标柱形图</span>
      <i v-show="!isPanelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      ></i>
    </div>
    <div>
      <div id="doughnutChartT" style="height: 400px; width: 400px"></div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ['id', 'panelSetIcon'],
  data() {
    return {
      panelId: this.id,
      isPanelSetIcon: this.panelSetIcon,
      circleProgressHeight: 0,
    }
  },
  methods: {
    // 删除面板项发送事件
    deletePanelItem() {
      this.$emit('deletePanelItemEvent', this.panelId)
    },
    // acharts饼形图
    doughnut() {
      const myChart = this.$echarts.init(
        document.getElementById('doughnutChartT')
      )
      myChart.setOption({
        polar: {
          radius: ['10%', '50%'],
        },
        angleAxis: {
          min: 0, //最小刻度
          max: 4, //最大刻度
          startAngle: 90,
          show: true,
        },
        radiusAxis: {
          type: 'category',
          show: false,
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'bar',
            name: '其他',
            data: [2],
            coordinateSystem: 'polar',
            roundCap: false,
            label: {
              show: true,
              position: 'middle',
              //   formatter: '{b}: {c}',
            },
          },
          {
            type: 'bar',
            name: '机械电子制造业',
            data: [1],
            coordinateSystem: 'polar',
            roundCap: false,
            label: {
              show: true,
              position: 'middle',
              //   formatter: '{b}: {c}',
            },
          },
          {
            type: 'bar',
            name: '资源加工工业',
            data: [3],
            coordinateSystem: 'polar',
            roundCap: false,
            label: {
              show: true,
              position: 'middle',
              //   formatter: '{b}: {c}',
            },
          },
          {
            type: 'bar',
            name: '轻纺工业',
            data: [4],
            coordinateSystem: 'polar',
            roundCap: false,
            label: {
              show: true,
              position: 'middle',
              //   formatter: '{b}: {c}',
            },
          },
        ],
        legend: {
          bottom: 6,
          icon: 'circle',
          itemHeight: 10,
          show: true,
          data: ['机械电子制造业', '轻纺工业', '资源加工工业', '其他'],

          textStyle: {
            color: '#96F5F6',
            fontSize: 8,
          },
        },
      })
    },
  },
  mounted() {
    this.doughnut()
    this.circleProgressHeight =
      document.getElementById('doughnutChartT').clientWidth
  },
}
</script>

<style>
.el-card {
  height: 100%;
}
.el-icon-close {
  font-size: 1.2em;
  cursor: pointer;
}
.el-card-title {
  font-weight: bold;
}
.remind-box {
  display: flex;
  height: 160px;
  position: relative;
}
.explain-item .explain-title {
  font-size: 12px;
  color: #8c8c8c;
}
</style>
